<template>
  <div class="menuBotton">
    <div v-tabbar="{
        'menus': menus,
        menuColor: '#888',
        activeMenuColor: '#FF4400',
        onMenuClick: menuClicked}">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
    export default {
        name: "MenuBotton",
        data(){
          return{
            menus: [
              {
                iconOn: 'ion-ios-bookmarks',
                iconOff: 'ion-ios-bookmarks-outline',
                text: '下单指南',
                path: '/guide'
              },
              {
                iconOn: 'ion-ios-rose',
                iconOff: 'ion-ios-rose-outline',
                text: '购花中心',
                path: '/shopCenter',
              },
              {
                iconOn: 'ion-ios-paper',
                iconOff: 'ion-ios-paper-outline',
                text: '花单查询',
                path: '/queryFrom'
              },
              {
                iconOn: 'ion-ios-person',
                iconOff: 'ion-ios-person-outline',
                text: '花服务',
                path: '/servicer'
              }
            ]
          }
        },
      methods : {
        menuClicked(index){
          console.log(index);
        }
      },
      created(){

      },
      beforeDestroy() {
        $tabbar.$emit('hideTabbar')
      }
    }
</script>

<style scoped>

</style>
